<template>
	<view>
		<view class="bodyData">
			<view class="bodyHead">
				<view>
					<text class="iconfont icon-shentizhuangkuang"></text>
					最近身体状况
				</view>
				<navigator v-if="docInf" url="/subpage/physicalCondition/physicalCondition" open-type="navigate" class="publicFontStyle">更多动态</navigator>
				<navigator v-else @tap="toast" >更多动态</navigator>
			</view>
			<view class="dataMain">
				<view class="M-son">
					<view class="M-t">
						更新时间
						<view>
							{{ docInf ?  timeStep : '暂无数据'}}
						</view>
					</view>
					<view class="M-t">
						更新时间
						<view>
							{{ docInf ?  timeHeartbeat : '暂无数据'}}
						</view>
					</view>
					<view class="M-t">
						更新时间
						<view>
							{{ docInf ?  timeBloodPressure : '暂无数据'}}
						</view>
					</view>
				</view>
				<view class="numData">
					<view :class="(  step < 1000 ? 'danger' :  step >= 1000 &&  step <= 3000 ? 'early' : 'health' )">
						<span v-if=" step < 1000">❗</span>
						{{ docInf ?  step : 0}}
					</view>
					<view :class="(  heartbeat < 50 ||  heartbeat > 110 ? 'danger' : 'health' )">
						<span v-if=" heartbeat < 50 ||  heartbeat > 110">❗</span>
						{{ docInf ?  heartbeat : 0}}
					</view>
					<view :class="(  bloodPressure > 150 ||  bloodPressure < 30 ? 'danger' : 'health' )">
					<span v-if=" bloodPressure">
						<span v-if=" bloodPressure > 150 ||  bloodPressure < 30">❗</span>
					</span>
						{{ docInf ?  bloodPressure : 0}}
					</view>
				</view>
				<view class="M-son">
					<view>步数</view>
					<view>心跳</view>
					<view>血压</view>
				</view>
			</view>
		</view>
		<view class="remine">
			<view class="remine-title">
				待办事务
				<text @tap="jumpMore" class="publicFontStyle">更多</text>
			</view>
			<view class="remine-mid" v-if="docInf">
				<view class="remine-left">
					<view>
						上次随访时间：<text>{{getLast}}</text>
					</view>
					<view>
						下次随访时间：<text>{{getNext}}</text>
					</view>
					<view>
						下次随访还有：<text class="data publicFontStyle">{{getDay}}</text><text class="data2"> 天</text>
					</view>
				</view>
				<view class="remine-right" v-if="docInf.Affair">
					<view>
						<image :src="affairImg"></image>
					</view>
					<view>
						<view class="publicFontStyle">{{docInf.incidentName}}</view>
						事件时间还有<span class="publicFontStyle">{{Handler[0]}}</span>
						天<span class="publicFontStyle">{{Handler[1]}}</span>小时<span class="publicFontStyle">{{Handler[2]}}</span>分
					</view>
				</view>
			</view>
			<view v-else class="remine-mid">
				
			</view>
		</view>
		<view class="family">
			<view class="title">
				<view>乡村医生</view>
			</view>
			<view class="family-data">
				<view>
					<image :src='familyImg'></image>
				</view>
				<view>
					<view>
						<span style="font-weight: 700; font-size: 40rpx;">{{docInf.name? docInf.name : '暂无信息'}}</span>
						<span style="margin-left: 10rpx;">{{docInf.region? docInf.region : ''}}</span>
					</view>
					<view>
						<text v-if="docInf">
							排班时间：{{docInf.startWork.slice(0, -3)}}-{{docInf.endWork.slice(0, -3)}}
						</text>
						<text v-else>
							排班时间：暂无数据
						</text>
						<span v-if="getWorkTime && docInf" class="tip">工作中</span>
						<span v-else-if="!docInf" class='tipT'>暂无数据</span>
						<span v-else class='tipT'>休息中</span>
					</view>
				</view>
			</view>
			<view class="driving" >
				<view @tap="subscribe">
					<text class="iconfont icon-shijian"></text>
					<span>预约服务</span>
				</view>
				<view @tap="call">
					<text class="iconfont icon-dianhua"></text>
					<span>紧急联系</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  name: '',
	props: ['docInf'],
	data() {
    return {
			step: '',
			heartbeat: '',
			bloodPressure: '',
			timeStep: '',
			timeHeartbeat: '',
			timeBloodPressure: ''
    }
	},
	created() {
		console.log(this.docInf);
		this.step = this.docInf.step? this.docInf.step : 0
		this.heartbeat = this.docInf.heartbeat? this.docInf.heartbeat : 0
		this.bloodPressure = this.docInf.bloodUp? this.docInf.bloodUp : 0
		
		this.timeStep = this.docInf.stepUpTime? this.docInf.stepUpTime : 0
		this.timeHeartbeat = this.docInf.heartbeatUpTime? this.docInf.heartbeatUpTime : 0
		this.timeBloodPressure = this.docInf.bloodUpTime? this.docInf.bloodUpTime : '暂无数据'
	},
	watch: {
		docInf: {
      handler: function (val, oldVal) {
				this.step = this.docInf.step? this.docInf.step : 0
				this.heartbeat = this.docInf.heartbeat? this.docInf.heartbeat : 0
				this.bloodPressure = this.docInf.bloodUp? this.docInf.bloodUp : 0
				
				this.timeStep = this.docInf.stepUpTime? this.docInf.stepUpTime : 0
				this.timeHeartbeat = this.docInf.heartbeatUpTime? this.docInf.heartbeatUpTime : 0
				this.timeBloodPressure = this.docInf.bloodUpTime? this.docInf.bloodUpTime : 0
			},
      deep: true
    },
	},
  methods: {
    call: function () {
      uni.makePhoneCall({
        phoneNumber: '114',
      });
    },
    subscribe: function () {
			if(this.docInf.uphone) {
				uni.navigateTo({
					url: `/pages/subscribe/subscribe?info=${JSON.stringify(this.docInf)}`
				})
			} else {
				this.toast()
			}
    },
		jumpMore: function () {
			if(!this.docInf.uphone) {
				this.toast()
			} else {
				uni.navigateTo({
					url: `/pages/subscribeInfo/subscribeInfo?uphone=${this.docInf.uphone}`
				})
			}
		},
		toast: function () {
			uni.showToast({
				title: '请先登录',
				icon: 'error',
				duration: 2000
			});
		}
  },
	computed: {
		getLast: function () {
			return this.$getTime.getTime(this.docInf.lastFollow)
		},
		getNext: function () {
			return this.$getTime.getTime(this.docInf.nextFollow)
			// return this.docInf.nextFollow
		},
		getDay: function () {
			return Math.ceil((this.docInf.nextFollow - new Date(Date.now()).valueOf()) / (1000 * 3600 * 24))
		},
		getWorkTime: function () {
			let nh = new Date(Date.now()).getHours()
			let nm = new Date(Date.now()).getMinutes()
			
			let nowTime = Date.parse(new Date(Date.UTC(99, 1, 2, nh, nm, 0)))
			let lastTime = Date.parse(new Date(Date.UTC(99, 1, 2, 8, 0, 0)))
			let endTime = Date.parse(new Date(Date.UTC(99, 1, 2, 18, 0, 0)))
			
			console.log();
			return nowTime >= lastTime && nowTime < endTime
		},
		Handler: function () {
			return this.$getTime.getGapTime(this.docInf.Affair, Date.now())
		},
		familyImg: function () {
			return this.$url + '/state/myData/samurai.png'
		},
		affairImg: function () {
			return this.$url + '/state/myData/neike.png'
		},
	}
};
</script>

<style scoped lang='scss'>
  $wid: 90%;
	
  .bodyData {
    position: relative;
    width: $wid;
    height: 350rpx;
    margin: auto;
    margin-top: 40rpx;
    background-color: #f1f1f1;
    border-radius: 30rpx;
    box-shadow: 0rpx 2rpx 4rpx rgba(222, 197, 197, 0.5),
            0rpx 3rpx 6rpx rgba(249, 196, 196, 0.5);
    .bodyHead {
      position: absolute;
      left: 50%;
      top: 20rpx;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;
      width: 95%;
      .icon-shentizhuangkuang {
        width: 40rpx;
        height: 40rpx;
        vertical-align: middle;
        margin-right: 10rpx;
      }
    }
    .dataMain {
      position: absolute;
      bottom: 0;
      display: flex;
      align-content: space-around;
      flex-wrap: wrap;
      width: 100%;
      height: 70%;
      background-color: #fff;
      margin: auto;
      padding: 10rpx 0;
      >.M-son {
        display: flex;
        justify-content: space-around;
        width: 100%;

        >view {
          width: 33.3%;
          text-align: center;
          font-family: "微软雅黑";
          
          >view {
            font-size: 22rpx;
            font-family: "Adobe 黑体 Std";
          }
        }
        .M-t {
          font-family: "楷体";
        }
      }
      .numData {
        display: flex;
        width: 100%;
        
        >view {
          text-align: center;
          flex: 1;
          font-weight: 700;
          font-size: 36rpx;
        }
      }
    }
    .danger {
      color: #F56C6C;
    }
    .health {
      color: #5AC725;
    }
    .early {
      color: #F9AE3D;
    }
  }
  .remine {
    width: $wid;
    margin: auto;
    box-shadow: 0rpx -2rpx 4rpx rgba(222, 197, 197, 0.5),
                0rpx -3rpx 6rpx rgba(249, 196, 196, 0.5);
    background-color: #f9f9f9;
    margin-top: 30rpx;
    margin-bottom: 40rpx;
    border-radius: 30rpx;
    .remine-title {
      display: flex;
      justify-content: space-between;
      font-weight: 700;
      font-size: 36rpx;
      padding: 20rpx;
      text {
        /* font-weight: 500; */
        text-decoration:underline;
      }
    }
    .remine-mid {
      padding: 0rpx 15rpx 6rpx 15rpx;
      >view {
        margin-bottom: 30rpx;
        background-color: #fff;
        border-radius: 30rpx;
        padding: 20rpx;
      }
    }
    .remine-left {
      display: flex;
      align-content: space-between;
      flex-wrap: wrap;
			flex-direction: column;
      box-shadow: 0rpx 4rpx 4rpx #f1f1f1;
      >view {
        padding: 10rpx 0;
        font-family: "微软雅黑";
        font-weight: 700;
        text {
          font-family: "宋体";
          font-weight: 500;
        }
      }
      .data {
        font-size: 68rpx;
      }
      .data2 {
        font-size: 22rpx;
      }
    }
    .remine-right {
      display: flex;
      justify-content: space-around;
      font-family: "新宋体";
      font-weight: 700;
      box-shadow: 0rpx 4rpx 4rpx #f1f1f1;
      image {
        width: 100rpx;
        height: 100rpx;
      }
      >view:nth-child(2) {
        >view:nth-child(1) {
          margin-bottom: 10rpx;
        }
      }
    }
  }
  .family {
    background-color: #fff;
    padding-bottom: 50rpx;
    .title {
      display: flex;
      align-items: center;
      width: 90%;
      margin: auto;
      margin-bottom: 20rpx;
      >view {
        padding: 6rpx;
        background-color: #FF8700;
        color: #fff;
        border-radius: 6rpx;
        margin-left: 5rpx;
      }
    }
    .family-data {
      display: flex;
      justify-content: space-between;
      width: 85%;
      margin: auto;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
      .tip {
        display: inline-block;
        background-color: #ffe58f;
        padding: 10rpx;
        border-radius: 10rpx;
        margin-left: 20rpx;
      }
      .tipT {
        display: inline-block;
        background-color: #bfbfbf;
        padding: 10rpx;
        border-radius: 10rpx;
        margin-left: 20rpx;
      }
    }
    .driving {
      display: flex;
      justify-content: space-around;
      margin-top: 20rpx;
      .iconfont {
        font-size: 42rpx;
        margin-right: 10rpx;
      }
      >view {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 150rpx;
        background-color: #f1f1f1;
        width: 250rpx;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
				box-shadow: 0rpx 2rpx 4rpx rgba(222, 197, 197, 0.5),
				        0rpx 3rpx 6rpx rgba(249, 196, 196, 0.5);
      }
    }
  }
</style>